<template>
  <div class="white">
    <div class="top-bar hidden-xs" id="topBar" ref="topBar">
      <div class="topbar-inner flex-between">
        <div class="flex-center">
          <div class="logo-div">
            <img class="logo" src="../assets/img/logo.png" alt="">
            <div>美牙</div>
          </div>
          <div class="menu">
            <ul>
              <li ref="li1" class="router-link" :class="path === 'Home' ? 'router-link-active' : ''" @click="routeJump('/')">首页</li>
              <!-- <li ref="li2" class="router-link" :class="path === 'Recommend' ? 'router-link-active' : ''" @click="routeJump('/recommend')">个人推荐</li> -->
              <li ref="li3" class="router-link" :class="path === 'List' ? 'router-link-active' : ''" @click="routeJump('/list')">玩乐点展示</li>
              <li ref="li4" class="router-link" :class="path === 'Info' ? 'router-link-active' : ''" @click="routeJump('/info')">个人信息</li>
            </ul>
          </div>
        </div>

        <div class="flex-center" style="float: right;font-size: 16px;cursor: pointer;" v-if="!userInfo.username">
          <div @click="routeJump('/login')" class="ml10" style="font-size: 14px;">登录</div>
          <div class="ml10" @click="routeJump('/login')" style="font-size: 14px;">注册</div>
        </div>
        <div class="flex-center" style="float: right;font-size: 16px;margin-top: 12px" v-if="userInfo.username">
          <img style="width: 40px;height: 40px;border-radius: 50%;margin-right: 10px;" v-if="userInfo.avator" :src="userInfo.avator" alt="">
          <div>{{userInfo.username}}</div>
        <div class="flex-center" style="float: right;font-size: 16px;cursor: pointer;" v-if="userInfo.username">
          <div @click="logout" class="ml10" style="font-size: 14px;color: red;">退出</div>
        </div>
        </div>
        
      </div>
    </div>

    <el-dialog
      title="登录"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form
        ref="loginForm"
        label-width="100px"
        label-position="top"
        :model="loginForm"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username" class="user">
          <el-input
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="pass">
          <el-input
            id="password"
            type="password"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="请输入密码"
            @keyup.enter.native="handleEnterClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div
            style="display: flex;justify-content: space-between;width: 100%;"
          >
            <el-button
              id="enterBtn"
              type="primary"
              style="width:100%;"
              @click="submit('loginForm')"
              >登录</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { login } from '../service'
export default {
  data() {
    return {
      isHover: false,
      status: "close",
      currentMenu: "首页",
      mbMenuImg: "",
      path: '',
      userInfo: {},
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      dialogVisible: false
    };
  },
  computed: {
    router() {
      let path = this.$store.state.router;
      this.$nextTick(() => {
        if (path === "/") {
          // pc端样式
          if (document.body.clientWidth > 600) {
            this.$refs.li1.style.borderBottom = "2px solid #ff9d00";
          }
        }
      });
      return this.$store.state.router;
    },
  },
  watch: {
    $route: {
      handler(to) {
        this.path = to.name
      },
      immediate: true,
    },
  },
  mounted() {
    let ls = localStorage.getItem('meiyaWebInfo')
    if (ls) {
      this.userInfo = JSON.parse(ls)
    }
  },
  methods: {
    toMine() {
      this.$router.push('/info')
    },
    routeJump(path, e) {
      if (!path) {
        return;
      }
      if (path.indexOf("#") === -1) {
        // 滚动条返回顶部
        $("body,html").animate(
          {
            scrollTop: 0,
          },
          100
        );
      }
      this.$router.push({
        path,
      });
    },
    logout() {
      localStorage.removeItem('meiyaWebInfo')
      // location.reload();
      this.$router.push({
        path: "/login",
      });
    },
    login() {
      this.dialogVisible = true
      this.loginForm.username = ''
      this.loginForm.password = ''
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            username: this.loginForm.username,
            password: this.loginForm.password,
          };
          login(params).then((data) => {
            if (data.code === 200) {
              localStorage.setItem(
                "meiyaWebInfo",
                JSON.stringify({
                  ...data.user,
                  likes: data.user.likes.split(',')
                })
              );
              this.userInfo = data.user
              this.dialogVisible = false
              this.$message.success("登录成功！");
              this.$router.push({
                path: "/",
              });
            } else {
              this.$message.error(data.msg[0].msg);
            }
          });
        }
      });
    },
    bc() {
      this.dialogVisible = false
    }
  },
};
</script>

<style lang="scss" scoped>
#topBar {
  width: 100%;
  height: 64px;
  position: fixed;
  top: 0;
  display: flex;
  .topbar-inner {
    width: 1200px;
    height: 64px;
    margin: auto;
  }

  .name {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }
}
.dark {
  color: #fff;
  #topBar {
    background: transparent;
  }
}

.white {
  color: #000000;
  #topBar {
    background: #fff;
  }
}

#topBar2 {
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 997;
  top: 0;
}

.logo-mobile {
  display: flex;
  float: left;
  width: 100%;
  height: 100%;
  line-height: 50px;
  padding-left: 5px;
}

.logo-mobile .title > div:first-child {
  font-size: 14px;
  line-height: 12px;
  margin-top: 15px;
  text-align: left;
  margin-left: 5px;
}

.logo-mobile .title > div:nth-child(2) {
  font-size: 10px;
  line-height: 12px;
  margin-left: 5px;
}
.navigation {
  width: 155px;
  height: calc(100% - 50px);
  position: fixed;
  right: 0;
  top: 50px;
  background: #fff;
  z-index: 999;
}

.navigation2 {
  width: 155px;
  height: calc(100% - 50px);
  position: fixed;
  right: 155px;
  top: 50px;
  background: #fff;
  z-index: 99;
}

.each-navigation {
  width: 100%;
  height: 50px;
  float: left;
  color: #666666;
  margin-top: 17px;
}

.each-navigation2 {
  width: 100%;
  height: 50px;
  color: #ffffff;
  float: left;
  margin-top: 17px;
}

.each-navigation-inner {
  margin-right: 50px;
  font-size: 18px;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
  text-align: right;
}

.each-navigation2-inner {
  margin-right: 10px;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
  text-align: right;
  color: #000;
}

.navigation-focus {
  background: #ffffff;
  color: #000000 !important;
}

.navigation-border {
  border-left: 2px solid #409eff;
}

.navigation-color {
  color: #0bb9b9 !important;
}

.bg-unset {
  background: unset;
}

.router-link {
  font-size: 16px!important;
  color: #333;
}

.router-link-hover {
  color: #ff9d00;
}

.logo-mobile img {
  width: 32px;
  height: 32px;
}

.menu-close {
  width: 32px !important;
  height: 32px !important;
}
.router-link-active {
  border-bottom: 2px solid #ff9d00;
}
.logo-div {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ff9d00;
  font-size: 24px;
  img {
    width: 30px;

  }
}
</style>